<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/regStyle.css">
    <!--设置标签图标-->
    <link href="favicon.ico" rel="icon/shortcut icon">
    <link rel="stylesheet" href="css/footerStyle.css">
               
    
</head>
<body>

<!--注册头部-->
<div id="reg_header">
    <div class="reg_h_center">
            <img src="images/logo.png" alt="">
            <h3>欢迎注册</h3>
            <div class="reg_h_right">
                <span>已有账户</span><a href="login.jsp">请登录</a>
            </div>
    </div>
</div>

<div id="reg_main">
        <div class="main_left">
<!--             <form action="/28-Mystore/RegistServlet" id="reg_form" method="post"> -->
				<form action="/register"  method="post" id="reg_form" novalidate="novalidate"
						onsubmit="return checkForm();">
                <div>
                    <label>用户名</label>
                    <input id="username"  type="text" placeholder="请输入用户名..." name="username" maxlength="20" onblur="checkUserName()" />
                    <span id="span1">${msg}</span>                                 
                </div>
                <div>
                    <label>邮箱</label>
                   <input type="text" id="email" name="email" placeholder="请输入邮箱..."
							class="text" maxlength="200" onblur="checkEmail()"/>
					<span id="span2"></span>
                </div>  
                <div>
                    <label>电话</label>
                    <input id="phone" type="text" placeholder="请输入电话..." name="phone" maxlength="200" onblur="checkPhone()"/>
                    <span id="span3"></span>
                </div>
              
                <div>
                    <label>地址</label>
                    <input id = "addr" type="text" placeholder="请输入地址..." name="addr" maxlength="200" onblur="checkAddr()"/>
                     <span id="span4"></span>
                </div>              
                <div>
                    <label>密码</label>
                    <input id="pwd" type="text" placeholder="请输入密码.." name="password" autocomplete="off" onblur="checkPwd()"/>
                    <span id="span5">${msg}</span>
                </div>
                <div>
                    <label>确认密码</label>
                    <input id="pwd2" type="text" placeholder="请再次输入密码..."autocomplete="off" onblur="checkPwd2()"/>
                    <span id="span6">${msg}</span>
                </div>

                <div class="submit_button">
                    <input type="button" value="立即注册" onclick="checkData()">
                </div>
            </form>
        </div>
        <div class="main_right">
             <img src="images/reg_right.png" alt="">
        </div>
</div>

<%@ include file="footer.jsp" %>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
	
	submitForm();
})
//校验邮箱不为空
function checkEmail(){
	var email = $('#email').val();
	$("#span2").html("");
	if(email=="")
	//alert("邮箱不能为空");
	$("#span2").html("<font color='red'>邮箱不能为空</font>");
}
function checkPhone(){
	var phone = $('#phone').val();
	$("#span3").html("");
	if(phone=="")
	$("#span3").html("<font color='red'>电话不能为空</font>");
}	
function checkAddr(){
	var addr = $('#addr').val();
	$("#span4").html("");
	if(addr=="")
	$("#span4").html("<font color='red'>地址不能为空</font>");
	
}
function checkPwd(){
	var pwd = $('#pwd').val();
	$("#span5").html("");
	if(pwd=="")
	$("#span5").html("<font color='red'>密码不能为空</font>");
}
function checkPwd2(){
	var pwd=$("#pwd").val();
	var pwd2=$('#pwd2').val();
	$('#span6').html("");
	if(pwd!=pwd2){
		$("#span6").html("<font color='red'>两次密码不一致</font>");
	}
}
function checkUserName(){
	$.ajax({
		type : "GET",
		url : "/check",
		dataType : "json",
		contentType : "application/json",
		data :{username:$("#username").val()},
		success : function(result){
			if(result==1){
				$("#span1").html("<font color='green'>用户名可以使用</font>");
			}else if(result == -1){
				$("#span1").html("<font color='red'>用户名不能为空</font>");
				
			}else{
				$("#span1").html("<font color='red'>用户名已经存在</font>");
			}
		}
})
}
function checkData() {

	//1.获取用户名， 密码   确认密码
	var username=$("#username").val();
	var pwd=$("#pwd").val();
	var pwd2=$("#pwd2").val();
//     var username =  document.getElementById("username");
//     var pwd =  document.getElementById("pwd");
//     var pwd2 =  document.getElementById("pwd2");
    
    //2.判断输入的内容不能为空
    if(username==""){
    	alert("请输入用户名");
    	return false;
    }
    if(pwd==""){
    	alert("请输入密码");
    	return false;
    }
    if(pwd2==""){
    	alert("请再次输入密码");
    	return false;
    }
    
    //3。两次密码是否一样
    if(pwd != pwd2){

    	alert("两次输入的密码不一样");
    	return false;
    }else
    	{
    	var form =  document.getElementById("reg_form");
    	form.submit();//通过js提交表单 执行action
    	}
	
}



</script>




</body>
</html>


